<!--  -->
<template>
  <div class='EnergyStatistics'>
    <!-- 统计 -->
    <h1 class='statistical'>产品数据统计</h1>
    <!-- 时间 -->
    <div class='time'>
        <span>时间维度</span>
        <template>
        <el-select v-model="value_time" placeholder="" size='mini'>
        <el-option
        v-for="item in options_time"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
        </el-select>
        </template>
        <span>时间区间</span>
        <el-date-picker
        v-model='value_time_s'
        size='mini'
        type="datetime"
        placeholder="选择日期时间">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
        v-model='value_time_e'        
        size='mini'
        type="datetime"
        placeholder="选择日期时间">
        </el-date-picker>
        <span>车间</span>
        <template>
        <el-select v-model="value_time" placeholder="" size='mini'>
        <el-option
        v-for="item in options_time_2"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
        </el-select>
        </template>
        <span class='buttom'>
        <el-button type="primary" size='mini'>查询</el-button>
        <el-button size='mini'  @click="centerDialogVisible = true">导出</el-button>
        </span>
       
    </div>
     <!-- 分析 -->
    <div class='details'>
      <div class='ynxq'>
        <p>用能详情</p>
      </div>
      <div class='table'>
        <el-table
        :stripe='true'
        :data="tableData"
        style="width: 100%">
        <el-table-column
        v-for="(item,index) in 8"
        :key='index'
        prop="date"
        label="日期"
        width="">
        </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 图表 -->
    <div class='ec clearfix'>
      <div class='ec_left'>
        <div class='title'>
          <p>各车间能源费用占比</p>
        </div>
        <ECl width='466px' height='350px' :data='d'></ECl>        
      </div>
      <div class='ec_right'>
        <div class='title'>
          <p>各车间产量分布</p>
        </div>
        <ECr width='474px' height='350px' :data='d'></ECr>        
      </div>
    </div>
    <!-- 详情 -->
     <div class='details'>
      <div class='ynxq'>
        <p>用能详情</p>
      </div>
      <div class='table'>
        <el-table
        :stripe='true'
        :data="tableData"
        style="width: 100%">
        <el-table-column
        v-for="(item,index) in 8"
        :key='index'
        prop="date"
        label="日期"
        width="">
        </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 导出弹出框 -->
    <div class='dialog'>
      <el-dialog
      top='40vh'
      :visible.sync="centerDialogVisible"
      width="420px"
      center>
      <span>请选择数据存储的文件类型</span>
      <span>
      <el-radio-group v-model="radio_value">
        <el-radio :label="1">execl</el-radio>
        <el-radio :label="2">pdf</el-radio>
      </el-radio-group>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size='mini' @click="centerDialogVisible = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import ECl from "./EC_l";
import ECr from "./EC_r";
import "./index.scss";
export default {
 components:{
    ECl,
    ECr
  },
  data() {
    return {
      // 导出弹出框
      centerDialogVisible: false,
      radio_value: 2,
      // 日月年
      options_time: [
        {
          value: 1,
          label: "日"
        },
        {
          value: 2,
          label: "月"
        },
        {
          value: "3",
          label: "年"
        }
      ],
      options_time_2: [
        {
          value: 1,
          label: "8#车间"
        },
        {
          value: 2,
          label: "6#车间"
        },
        {
          value: "3",
          label: "5#车间"
        }
      ],
      value_time: 1,
      value_time_2: 1,
      // 开始结束时间
      value_time_s: "",
      value_time_e: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.EnergyStatistics {
  width: 990px;
  background: #f5f5f5;
  margin: 0 auto;
  .statistical {
    color: #333;
    font-size: 20px;
    padding: 10px 0;
  }
  .time {
    width: 100%;
    height: 54px;
    line-height: 54px;
    background: #fff;
    margin-bottom: 10px;
    span {
      font-size: 14px;
      color: #333;
      padding: 3px;
    }
  }
  // 图表
  .ec {
    margin: 10px 0;
    .ec_left {
      width: 486px;
      height: 429px;
      float: left;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        border-bottom: 1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        padding: 20px 10px;
        margin-bottom: 20px;
      }
    }
    .ec_right {
      width: 494px;
      height: 429px;
      float: right;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        border-bottom: 1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        padding: 20px 10px;
        margin-bottom: 20px;
      }
    }
  }
  // 详情
  .details {
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
    .ynxq {
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 16px;
      padding: 20px 10px;
    }
    .table {
      padding: 20px 0;
    }
  }
  .dialog {
    span {
      display: inline-block;
      width: 370px;
      text-align: center;
    }
    span:nth-of-type(2) {
      margin-top: 30px;
    }
  }
}
</style>